<template>
    <div id="content">
        <!-- 内容 -->
        <el-row :gutter="10" class="chart_top">
            <el-col :span="24">
                <el-card shadow="always" :style="{width:'100%',height:autoHeight+'px'}">
                    <div style="position: relative; ">
                        <el-row class="data_box" style="border:0px solid red;float:right;top:10px;right:10px;z-index:1999;width:500px;height:32px;">
                            <el-form :inline="true" :model="searchBox" label-width="50px"  class="search-panle"> 
                                <el-form-item label="">
                                    <el-badge :value="tipCount" class="item">
                                        <el-button size="small" v-popover:search>统筹</el-button>
                                    </el-badge>
                                </el-form-item>
                                <el-form-item label="日期:">
                                    <el-date-picker
                                        v-model="searchBox.searchTime"
                                        type="month"
                                        placeholder="选择日期"
                                        style="width:130px;margin-top:0px;"
                                        @change="searchByDate"
                                    ></el-date-picker>
                                </el-form-item>
                                <el-form-item label="单号:">
                                    <el-select v-model="searchBox.taskNo" placeholder="请选择" filterable  @change="searchByTaskNo">
                                        <el-option
                                        v-for="item in searchSelectList"
                                        :key="item"
                                        :label="item"
                                        :value="item"
                                        >
                                        </el-option>
                                    </el-select> 
                                </el-form-item>
                            </el-form>
                        </el-row>   
                        <div id="topBar" :style="{width:'100%',height:autoHeight-50+'px'}" v-loading='loading'></div>   
                    </div>
                </el-card>
            </el-col>
            <el-col :span="24">
                <el-card shadow="always" :style="{width:'100%',height:autoHeight+'px'}">
                    <div style="position: relative;"> 
                        <div id="bottomBar"  :style="{width:'100%',height:autoHeight-50+'px'}"></div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div id="popover">
            <el-popover
                ref="search"
                width="900"
                trigger="click"
            >
            <!-- private String taskNo;//任务单号
            private Integer drawCount;//图纸张数
            private Long drawNum;//图纸件数
            private BigDecimal sxWorkTime;//数铣总工时
            private BigDecimal pxWorkTime;//普洗总工时
            private BigDecimal totalPrices;//总价值 --> 
                <h1 style="color: #FFFFFF;background-color: #3ac1c4;margin-bottom:15px;padding:5px 0px 5px 15px; border-radius:3px;">统筹记录</h1>
                <div style="width:95%;border:1px solid gray; margin:0 auto; padding:5px 5px 5px 5px;">
                    <el-table  :data="detailTableList"  tooltip-effect  highlight-current-row border stripe>
                        <el-table-column type="index" :index="0" label="序号" min-width="120" align="center"></el-table-column>
                        <el-table-column property="taskNo" label="任务单号" min-width="120" align="center" sortable></el-table-column>
                        <el-table-column property="drawCount" label="图纸总张数" min-width="120" align="center" sortable></el-table-column>
                        <el-table-column property="drawNum" label="总件数" min-width="120" align="center" sortable></el-table-column>
                        <el-table-column property="sxWorkTime" label="数铣总工时" min-width="120" align="center" sortable></el-table-column>
                        <el-table-column property="pxWorkTime" label="普铣总工时" min-width="120" align="center" sortable></el-table-column>
                        <el-table-column property="totalPrices" label="总价值(W)" min-width="120" align="center" sortable></el-table-column>
                    </el-table>
                </div>
            </el-popover>
        </div>
        <el-dialog :title="dialog.topBarDetail.title" width="80%"  :visible.sync="dialog.topBarDetail.isShow"  v-dialogDrag>
            <el-input type="text" v-model="serchRule" auto-complete="off" style="width:100%;height:28px; float:left;margin-right:10px;" placeholder="请输入需要查询的图号" >
                <template slot="prepend">图纸编号</template>
            </el-input>
            <el-table  :data="dialog.topBarDetail.tableList.filter(data => data.draw_code.includes(serchRule)).slice((dialog.topBarDetail.currentPage-1)*dialog.topBarDetail.pagesize,dialog.topBarDetail.currentPage*dialog.topBarDetail.pagesize)">
                <el-table-column property="idx" label="序号" min-width="120" align="center"></el-table-column>
                <el-table-column property="draw_code" label="图纸编号" min-width="120" align="center"></el-table-column>
                <el-table-column property="draw_name" label="图纸名称" min-width="120" align="center"></el-table-column>
                <el-table-column property="num" label="件数" min-width="120" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" width="90">
                        <template slot-scope="scope">
                            <el-button @click="drawDetail(scope.row)" type="text" size="small">详情</el-button>
                        </template>
                </el-table-column>
            </el-table>
            <el-pagination  @size-change="topDetailHandleSizeChange" @current-change="topDetailHandleCurrentChange" :current-page="dialog.topBarDetail.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="dialog.topBarDetail.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="dialog.topBarDetail.total"></el-pagination>
        </el-dialog>
        <el-dialog :title="dialog.topGxBarDetail.title" width="80%"  :visible.sync="dialog.topGxBarDetail.isShow"  append-to-body v-dialogDrag>
            <div id="topGxBar"  :style="{height:autoHeight-50+'px'}"></div>
        </el-dialog>
        <el-dialog :title="dialog.bottomBarDetail.title" width="80%"  :visible.sync="dialog.bottomBarDetail.isShow"  v-dialogDrag>
            <el-input type="text" v-model="serchRuleB" auto-complete="off" style="width:100%;height:28px; float:left;margin-right:10px;" placeholder="请输入需要查询的图号" >
                <template slot="prepend">图纸编号</template>
            </el-input>
            <el-table  :data="dialog.bottomBarDetail.tableList.filter(data => data.drawCode.includes(serchRuleB)).slice((dialog.bottomBarDetail.currentPage-1)*dialog.bottomBarDetail.pagesize,dialog.bottomBarDetail.currentPage*dialog.bottomBarDetail.pagesize)">
                <el-table-column type="index" show-overflow-tooltip width="50" label="序号" min-width="120" align="center"></el-table-column>
                <el-table-column property="drawCode" label="图纸编号" min-width="120" align="center"></el-table-column>
                <el-table-column property="drawName" label="图纸名称" min-width="120" align="center"></el-table-column>
                <el-table-column property="drawNums" label="张数" min-width="120" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" width="90">
                        <template slot-scope="scope">
                            <el-button @click="drawDetail(scope.row)" type="text" size="small">详情</el-button>
                        </template>
                </el-table-column>
            </el-table>
            <el-pagination  @size-change="bottomDetailHandleSizeChange" @current-change="bottomDetailHandleCurrentChange" :current-page="dialog.bottomBarDetail.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="dialog.bottomBarDetail.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="dialog.bottomBarDetail.total"></el-pagination>
        </el-dialog>
    </div>
</template>
<script>
import echarts from 'echarts';
import planApi from 'plugins/axios/planApi.js';
export default {
    data(){
        return{
            tipCount:24,
            serchRule:'',
            serchRuleB:'',
            detailTableList:[],
            topBarTableList:[],
            bottomBarTableList:[],
            searchSelectList:[],
            grid:{
                legendData:[],
                line:null,
                pie:null,
                bar:null,
                lineOption:null,
                pieOption:null,
                barOption:null,
                lineYAxis:null,
                lineXAxis:null,
                pieYAxis:null,
                pieXAxis:null,
                barYAxis:null,
                barXAxis:null,
                lineSeriesData:[],
                pieSeriesData:[],
                barSeriesData:[],

            },
            topBar:{
                xAxisData:[],
                seriesData:[],
                records:[],
            },
            bottomBar:{
                xAxisData:[],
                seriesData:[],
                records:[],
            },
            topGxBar:{
                xAxisData:[],
                seriesData:[],
                records:[],
            },
            loading:false,
            itemColor:[],
            searchBox:{
                searchTime:new Date(),
                searchMonth:1,
                taskNo:'', 
                isDidThis:null,
                wb_plan_finsih_date:'',
                gx:'',
                draw_code:'',
            },
            dialog:{
                topBarDetail:{
                    title:'',
                    isShow:false,
                    currentPage:1,
                    pagesize:10,
                    total:0,
                    tableList:[],
                },
                topGxBarDetail:{
                    title:'',
                    isShow:false,
                    currentPage:1,
                    pagesize:10,
                    total:0,
                    tableList:[],
                },
                bottomBarDetail:{
                    title:'',
                    isShow:false,
                    currentPage:1,
                    pagesize:10,
                    total:0,
                    tableList:[],
                }
            },
        }
    },
    mounted(){
        let self = this;
        self.$nextTick(() => {
            self.init();
        });
    },
    created(){
        let self = this;
        window.orderGraph=this;
        //self.init();
    },
    watch:{
        $route(){
        }
    },
    computed:{
        autoHeight(){
            return this.$store.state.clientHeight/2-55;
        }
    },
    methods:{
        //初始化
        init(){
            let self = this;
            self.initBar();      
        },
        //初始化Bar统计图
        initBar(){
            let self = this;
            self.queryInitTopBarData();
            self.queryInitBottomBarData();
            self.queryDetailData();
        },
        //查询Top柱状统计图数据
        queryInitTopBarData(){
            let self = this;
            let year = self.searchBox.searchTime.getFullYear();
            let month = self.searchBox.searchTime.getMonth();
            let taskNo = self.searchBox.taskNo;
            let params ={"year":year,"month":month+1,"task_no":taskNo};
            planApi.orderGraphTopBarByCondtion(params).then(res=>{
                let tempArray = res.content.records;
                self.topBar.xAxisData =  res.content.dateList;
                self.topBar.records = tempArray;
                self.setTopBarSeriesData();
            });
        },
        //加工topBar相关series
        setTopBarSeriesData(){
            let self = this;
            self.topBar.seriesData = [];
            let newData = [];
            let oldData = [];
            // {
            //     name: '直接访问',
            //     type: 'bar',
            //     data: [320, 332, 301, 334, 390, 330, 320]
            // },
            // self.topBar.records;
            //进行
            if(self.topBar.records!=undefined &&self.topBar.records.length!=0){
                self.topBar.records.forEach(item=>{
                    if(item.state==='1'){
                        //老图纸
                        oldData.push({name:'老图纸',value:[item.wb_plan_finsih_date,item.num,item.task_no,item.state]});
                    }else if(item.state==='0') {
                        //新图纸
                        newData.push({name:'新图纸',value:[item.wb_plan_finsih_date,item.num,item.task_no,item.state]});
                    }        
                });
            };
            let seriesDataForNew ={
                name:'新图纸',
                type:'bar',
                stack:'图纸',
                data:newData
            };
            let seriesDataForOld ={
                name:'老图纸',
                type:'bar',
                stack:'图纸',
                data:oldData
            };
            self.topBar.seriesData.push(seriesDataForNew);
            self.topBar.seriesData.push(seriesDataForOld);
            self.setInitTopBarOption();
        },
        //设置TopBar统计图Option
        setInitTopBarOption(){
            let self = this;
            let colors = ['#5793f3', '#d14a61', '#675bba'];
            let echartsTopBar = echarts.init(document.getElementById("topBar"));
            echartsTopBar.clear();
            let option = {
                    title: {
                        text: '订单柱状图'
                    },
                    // color:self.itemColor,
                    tooltip: {
                        backgroundColor: "#F6F6F6",
                        borderWidth: 1,
                        borderColor: "rgba(0,0,0,.3)",
                        alwaysShowContent:false,
                        triggerOn: "click",
                        confine: true,
                        enterable: true,
                        transitionDuration: 0,
                        textStyle: {
                            color: "#333"
                        },
                        renderMode:'html',
                        extraCssText: 'box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3);',
                        padding: [5, 10],
                        position: function (pos, params, dom, rect, size) {
                            return [pos[0] + 10, pos[1]];
                        },
                        formatter:self.topBarTooltipHander,
                    },
                    legend: {
                        data:['新图纸','老图纸'], 
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    dataZoom: [
                        {
                            show: true,
                            start: 1,
                            end: 100,
                            width: 1,
                        },
                        {
                            type: 'inside',
                            start: 1,
                            end: 100
                        },
                        // {
                        //     show: true,
                        //     yAxisIndex: 0,
                        //     filterMode: 'empty',
                        //     width: 10,
                        //     height: '80%',
                        //     showDataShadow: false,
                        //     left: '93%'
                        // }
                    ],
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: [
                            {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: self.topBar.xAxisData
                        }
                    ],
                    yAxis: {
                        type: 'value',  
                        axisLabel: {  
                            show: true,  
                            interval: 'auto',  
                            formatter: '{value} 张'  
                            },  
                        show: true  
                    },
                    series:self.topBar.seriesData
            };
            echartsTopBar.setOption(option);
        },
        //获取某一月份所有生产任务统筹信息
        queryDetailData(){
            let self = this;
            debugger;
            let year = self.searchBox.searchTime.getFullYear();
            let month = self.searchBox.searchTime.getMonth()+1;
                // task_no:self.searchBox.taskNo,
                // draw_code:self.searchBox.draw_code,
                // wb_plan_finsih_date:self.searchBox.wb_plan_finsih_date
            planApi.queryDetailData(year,month).then(res=>{
                if(res.content!=null && res.content!=undefined){
                    debugger;
                    self.detailTableList = res.content;
                    self.tipCount = self.detailTableList.length==0?0:self.detailTableList.length-1;
                    // self.$nextTick(()=>{
                    //     self.setTopGxBarSeriesData();                        
                    // });
                }
            });
        }, 
        //获取一天或某个图纸相关的工序数据
        topGxDetailData(){
            let self = this;
            let param = {
                year:self.searchBox.searchTime.getFullYear(),
                month:self.searchBox.searchTime.getMonth()+1,
                task_no:self.searchBox.taskNo,
                draw_code:self.searchBox.draw_code,
                wb_plan_finsih_date:self.searchBox.wb_plan_finsih_date
            };
            planApi.queryTopDetailGxData(param).then(res=>{
                if(res.content!=null && res.content!=undefined){
                    self.topGxBar.xAxisData =  res.content.gxNameList;
                    self.topGxBar.records =  res.content.records;
                    self.dialog.topGxBarDetail.title = '工序柱状统计';
                    self.dialog.topGxBarDetail.isShow = true;
                    self.$nextTick(()=>{
                        self.setTopGxBarSeriesData();                        
                    });
                }
            });
        }, 
        //加工topGxBar相关series
        setTopGxBarSeriesData(){
            let self = this;
            self.topGxBar.seriesData = [];
            let data = [];
            let oldData = [];
            if(self.topGxBar.records!=undefined &&self.topGxBar.records.length!=0){
                self.topGxBar.records.forEach(item=>{
                        data.push({name:'',value:[item.gxName,item.drawCount,item.drawNums,item.gxCode,item.confirmWorkTime,item.predictWorkTime,item.wbPrice]});
                    }        
                );
            };
            let seriesDataForBox={
                name:'',
                type:'bar',
                data:data
            };
            self.topGxBar.seriesData.push(seriesDataForBox);
            self.setInitTopGxOption();
        },
        //设置topGxBar统计图Option
        setInitTopGxOption(){
            let self = this;
            let colors = ['#5793f3', '#d14a61', '#675bba'];

            let option = {
                    title: {
                        text: '工序柱状图'
                    },
                    // color:self.itemColor,
                    tooltip: {
                        backgroundColor: "#F6F6F6",
                        borderWidth: 1,
                        borderColor: "rgba(0,0,0,.3)",
                        alwaysShowContent:false,
                        triggerOn: "click",
                        confine: true,
                        enterable: true,
                        transitionDuration: 0,
                        textStyle: {
                            color: "#333"
                        },
                        renderMode:'html',
                        extraCssText: 'box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3);',
                        padding: [5, 10],
                        position: function (pos, params, dom, rect, size) {
                            return [pos[0] + 10, pos[1]];
                        },
                        formatter:self.topGxBarTooltipHander,
                    },
                    legend: {
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    dataZoom: [
                        {
                            show: true,
                            start: 1,
                            end: 100,
                            width: 1,
                        },
                        {
                            type: 'inside',
                            start: 1,
                            end: 100
                        },
                        // {
                        //     show: true,
                        //     yAxisIndex: 0,
                        //     filterMode: 'empty',
                        //     width: 10,
                        //     height: '80%',
                        //     showDataShadow: false,
                        //     left: '93%'
                        // }
                    ],
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: [
                            {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: self.topGxBar.xAxisData
                        }
                    ],
                    yAxis: {
                        type: 'value',  
                        axisLabel: {  
                            show: true,  
                            interval: 'auto',  
                            formatter: '{value} 张'  
                            },  
                        show: true  
                    },
                    series:self.topGxBar.seriesData
            };
            let echartsTopGxBar = echarts.init(document.getElementById("topGxBar"));
            echartsTopGxBar.clear();
            echartsTopGxBar.setOption(option);
        },
        //查询Bottom柱状统计图数据
        queryInitBottomBarData(){
            let self = this;
            let year = self.searchBox.searchTime.getFullYear();
            let month = self.searchBox.searchTime.getMonth();
            let taskNo = self.searchBox.taskNo;
            let params ={"year":year,"month":month+1,"task_no":taskNo};
            planApi.orderGraphBottomBarByCondtion(params).then(res=>{
                self.bottomBar.xAxisData =  res.content.gxNameList;
                self.bottomBar.records =  res.content.records;
                self.setBottomBarSeriesData();
            });
        },
        //加工Bottom相关series
        setBottomBarSeriesData(){
            let self = this;
            self.bottomBar.seriesData = [];
            let data = [];
            let oldData = [];
            if(self.bottomBar.records!=undefined &&self.bottomBar.records.length!=0){
                self.bottomBar.records.forEach(item=>{
                        data.push({name:'',value:[item.gxName,item.drawCount,item.drawNums,item.gxCode,item.confirmWorkTime,item.predictWorkTime,item.wbPrice]});
                    }        
                );
            };
            let seriesDataForBox={
                name:'',
                type:'bar',
                data:data
            };
            self.bottomBar.seriesData.push(seriesDataForBox);
            self.setInitBottomBarOption();
        },
        //设置Bottom统计图Option
        setInitBottomBarOption(){
            let self = this;
            let colors = ['#5793f3', '#d14a61', '#675bba'];
            let echartsBottomBar = echarts.init(document.getElementById("bottomBar"));
            echartsBottomBar.clear();
            let option = {
                    title: {
                        text: '工序柱状图'
                    },
                    // color:self.itemColor,
                    tooltip: {
                        backgroundColor: "#F6F6F6",
                        borderWidth: 1,
                        borderColor: "rgba(0,0,0,.3)",
                        alwaysShowContent:false,
                        triggerOn: "click",
                        confine: true,
                        enterable: true,
                        transitionDuration: 0,
                        textStyle: {
                            color: "#333"
                        },
                        renderMode:'html',
                        extraCssText: 'box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3);',
                        padding: [5, 10],
                        position: function (pos, params, dom, rect, size) {
                            return [pos[0] + 10, pos[1]];
                        },
                        formatter:self.bottomBarTooltipHander,
                    },
                    legend: {
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    dataZoom: [
                        {
                            show: true,
                            start: 1,
                            end: 100,
                            width: 1,
                        },
                        {
                            type: 'inside',
                            start: 1,
                            end: 100
                        },
                        // {
                        //     show: true,
                        //     yAxisIndex: 0,
                        //     filterMode: 'empty',
                        //     width: 10,
                        //     height: '80%',
                        //     showDataShadow: false,
                        //     left: '93%'
                        // }
                    ],
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: [
                            {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: self.bottomBar.xAxisData
                        }
                    ],
                    yAxis: {
                        type: 'value',  
                        axisLabel: {  
                            show: true,  
                            interval: 'auto',  
                            formatter: '{value} 张'  
                            },  
                        show: true  
                    },
                    series:self.bottomBar.seriesData
            };
            echartsBottomBar.setOption(option);
        },
        //查询条件
        searchByDate(val){
           let self = this;
           self.searchBox.searchTime = val;
           //进行时间节点所有单子的查询
           self.getOrderByDate();
        },
        //选择任务单号进行数据开发
        searchByTaskNo(val){
            let self = this;
            self.initBar();
        },
        //通过时间查询该时间段的所有单子
        getOrderByDate(){
            let self = this;
            let params = {
                year:self.searchBox.searchTime.getFullYear(),
                month:self.searchBox.searchTime.getMonth()+1,
            };
            planApi.orderGraphTopBarByDate(params).then(res=>{
                let tempArrayListData = res.content;
                let uiData = res.content;
                self.topBar.orderList = [];
                this.$set(this,'searchSelectList',uiData);
                // self.topBar.orderList = uiData;
                if(tempArrayListData.length>1){
                    if(tempArrayListData[0] != ""){
                        self.searchBox.taskNo = tempArrayListData[0];
                    }else{
                        self.searchBox.taskNo = tempArrayListData[1];
                    }
                }else if(tempArrayListData.length>0){
                    self.searchBox.taskNo = tempArrayListData[0];
                }else{
                   self.searchBox.taskNo=null;
                }
                self.initBar();
            });
            // 
        },
        //柱状图(TopBar)鼠标移动浮框展示效果处理函数
        topBarTooltipHander(params){
            let self = this;
                self.searchBox.isDidThis = params.value[3],
                self.searchBox.wb_plan_finsih_date = params.value[0];
            if(params!= null && params!= undefined){
                let res ='<a href="javascript:void(0);" onclick="topDetail(\'' +params.value[0]+'\')">图纸详情</a>&nbsp;'
                    +'<a href="javascript:void(0);" onclick="topGxDetail(\'' +params.value[0]+'\')">工序详情</a><br/>'
                    +'单号：'+params.value[2]+'<br/>'
                    +'类型：'+params.seriesName+'<br/>'
                    +'图纸数：'+params.value[1]+' 张'+'<br/>'
                    +'时间：'+params.value[0]+' <br/>'
                return res;
            }
        },
        //柱状图(TopGxBar)鼠标移动浮框展示效果处理函数
        topGxBarTooltipHander(params){
            let self = this;
                // self.searchBox.isDidThis = params.value[3],
                 self.searchBox.wb_plan_finsih_date = null;
            if(params!= null && params!= undefined){
                let res =''
                // let res ='<a href="javascript:void(0);" onclick="topDetail(\'' +params.value[0]+'\')">查看详情</a>&nbsp;'
                    // +'<a href="javascript:void(0);" onclick="topGxDetail(\'' +params.value[0]+'\')">工序详情</a><br/>'
                    +'图号：'+params.value[3]+'<br/>'
                    +'件数：'+params.value[2]+'<br/>'
                    +'图纸数：'+params.value[1]+' 张'+'<br/>'
                    +'类型：'+params.value[0]+' <br/>'
                return res;
            }
        }, 
        //柱状图(bootomBar)鼠标移动浮框展示效果处理函数
        bottomBarTooltipHander(params){
            let self = this;
            self.searchBox.gx = params.value[3];
            if(params!= null && params!= undefined){
                let res ='<a href="javascript:void(0);" onclick="bottomDetail(\'' +params.value[3]+'\')">查看详情</a><br/>'
                    +'工序编码：'+params.value[3]+'<br/>'
                    +'图纸张数：'+params.value[1]+' 张<br/>'
                    +'图纸件数：'+params.value[2]+' 件  '+'<br/>'
                return res;
            }
        },
        topDetailHandleSizeChange(size) {
            let self = this;
                self.dialog.topBarDetail.pagesize = size;
                self.dialog.topBarDetail.tableList = self.topBarTableList.slice(
                (self.dialog.topBarDetail.currentPage - 1) * size,
                self.dialog.topBarDetail.currentPage * size
            )
        },
        topDetailHandleCurrentChange(currentPage) {
            let self = this;     
            self.dialog.topBarDetail.tableList = self.topBarTableList.slice(
                (currentPage - 1) * 10,
                currentPage * 10
            )
        },
        bottomDetailHandleSizeChange(size) {
            let self = this;
                self.dialog.bottomBarDetail.pagesize = size;
                self.dialog.bottomBarDetail.tableList = self.bottomBarTableList.slice(
                (self.dialog.bottomBarDetail.currentPage - 1) * size,
                self.dialog.bottomBarDetail.currentPage * size
            )
        },
        bottomDetailHandleCurrentChange(currentPage) {
            let self = this;     
            self.dialog.bottomBarDetail.tableList = self.bottomBarTableList.slice(
                (currentPage - 1) * 10,
                currentPage * 10
            )
        },
        //获取一天相关数据的类型
        topDetailTableListData(){
            let self = this;
                self.topBarTableList = [];
            let param = {
                year:self.searchBox.searchTime.getFullYear(),
                month:self.searchBox.searchTime.getMonth()+1,
                task_no:self.searchBox.taskNo,
                isDidThis:self.searchBox.isDidThis,
                wb_plan_finsih_date:self.searchBox.wb_plan_finsih_date
            };
            planApi.queryTopDetailTableListData(param).then(res=>{
                if(res.content!=null && res.content!=undefined){
                    self.topBarTableList = res.content;
                    self.dialog.topBarDetail.tableList = self.topBarTableList.slice(0,10);
                    self.dialog.topBarDetail.total =  self.topBarTableList.length;
                    self.dialog.topBarDetail.title = '图纸清单';
                    self.dialog.topBarDetail.isShow = true;
                    //如果不为空，则进行数据绑定
                    //如果为空，则进行用户提示信息“not found data for the operation![未找到相关数据]”
                }
            });
        }, 
        //获取谋到工序的相关数据
        bottomDetailTableListData(){
            let self = this;
                self.bottomBarTableList = [];
            let param = {
                year:self.searchBox.searchTime.getFullYear(),
                month:self.searchBox.searchTime.getMonth()+1,
                task_no:self.searchBox.taskNo,
                gx:self.searchBox.gx,
            };
            planApi.queryBottomDetailTableListData(param).then(res=>{
                if(res.content!=null && res.content!=undefined){
                    self.bottomBarTableList = res.content;
                    self.dialog.bottomBarDetail.tableList = self.bottomBarTableList.slice(0,10);
                    self.dialog.bottomBarDetail.total =  self.bottomBarTableList.length;
                    self.dialog.bottomBarDetail.title = '工序图纸清单';
                    self.dialog.bottomBarDetail.isShow = true;
                    //如果不为空，则进行数据绑定
                    //如果为空，则进行用户提示信息“not found data for the operation![未找到相关数据]”
                }
            });
        },
        //图纸详情
        drawDetail(row){
            let self = this;
            //图纸编号
            self.searchBox.draw_code =  row.drawCode==undefined?row.draw_code:row.drawCode;
            self.topGxDetailData();
        },
    },
}
window.topDetail = function(val){
    let self = window.orderGraph;
    self.topDetailTableListData();
};
window.topGxDetail = function(val){
    let self = window.orderGraph;
    if(self.searchBox.isDidThis==1){
        self.searchBox.draw_code= null;
        self.topGxDetailData();
    }else{
          self.$message({
          message: '新图纸未进行工艺编程',
          type: 'success'
        });
    }
};
window.bottomDetail = function(val){
    let self = window.selorderGraph;
    self.searchBox.wb_plan_finsih_date = null;
    self.bottomDetailTableListData();
};
</script>
<style scoped>
#topBar {
    position: relative;
    z-index: 999;
}
#bottomBar {
    position: relative;
    z-index: 999;
}
#topGxBar{
    width:1366px;
}
</style>

